<template>
  <div class="page-work-picture-list">
    <h4 class="page-work-title">
      <label>图集列表</label>
      <div class="pull-right">
        <el-button 
          type="primary"
          @click="$router.push({name: 'myPictureAdd'})">添加</el-button>
      </div>
    </h4>

    <ul class="pic-list">
      <li class="item" v-for="item in dataList" :key="item.id">
        <div class="item-delete">
          <i class="el-icon-error"></i>
        </div>
        <div class="img" :style="{backgroundImage: `url(${item.coverUrl})`}">
          <!-- <img :src="item.coverUrl" alt> -->
        </div>
        <div class="txt">
          <h4>{{item.title}}</h4>
          <p>
            <el-tag size="mini" type="warning">{{item.worksType === 1 ? '作品' : '文章'}}</el-tag>
            -
            <el-tag size="mini" type="info">{{item.worksClassify}}</el-tag>
          </p>
        </div>
        <div class="handles">
          <el-button type="text" @click="onEdit(item)">编辑</el-button>
          <el-button type="text" @click="onDelete(item.id)">删除</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { listWorks, delWorks } from '../../api/picture'
export default {
  name: "pictureList",
  data() {
    return {
      dataList: [],
      hadLoad: false
    }
  },
  methods: {
        getDataList(){
            listWorks().then(rsp => {
                if(rsp.code === 200){
                  if(rsp.data && rsp.data.length > 0){
                      this.dataList = rsp.data
                    }else{
                      this.$router.push({name: 'myPictureEmpty'})
                    }
                }
                this.hadLoad = true
            })
        },

        onEdit(work){
          localStorage.workEditData = JSON.stringify(work)
          this.$router.push({name: 'myPictureAdd', query: {mode: 'edit', workType: work.worksType}})
        },

        onDelete(workId){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delWorks(workId).then(rsp => {
              if(rsp.code === 200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getDataList()
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        }
    },
    created(){
        this.getDataList()
    }
}
</script>

<style lang="less">
@primary: #1b3c92;
.page-work-picture-list {
  background-color: #f7f8f9 !important;
  .page-work-title{
    // .el-button{
    //   float: right;
    //   margin-right: 50px;
    // }
    .pull-right{
      padding-right: 20px;
    }
  }
  .pic-list {
    padding: 20px 20px 0;
    margin: 0 -1.5%;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    .item {
      float: left;
      width: 30.333%;
      margin: 1.5%;
      position: relative;
      background-color: #fff;
      // &:hover{
      //   .item-delete{
      //     display: block;
      //   }
      // }
      .item-delete{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        display: none;
        &:hover{
          color: @primary;
        }
      }
      .img {
        height: 200px;
        position: relative;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        // img {
        //   display: block;
        //   margin: 0 auto;
        //   height: 100%;
        // }
      }
      .txt {
        padding: 10px;
        h4 {
          margin-bottom: 10px;
          font-size: 16px;
        }
        p {
          font-size: 13px;
          line-height: 1.5;
          color: #707070;
        }
      }
      .handles{
        padding: 5px 10px;
        border-top: 1px solid #ddd;
      }
    }
  }
}
</style>